<!-- 个人信息界面 -->
<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img" @tap="gotoFeeds('/pages/userInfo/userInfoDetail/userInfoDetail')">
							<!-- 这里可以放自己的静态头像 -->

							<image :src="userInfo.avatar_url"></image>
							<!-- <open-data type="userAvatarUrl" class="user_head"></open-data> -->
						</view>
						<view class="center_info" @tap="gotoFeeds('/pages/userInfo/userInfoDetail/userInfoDetail')">
							<view class="center_name">
								<!-- 这里可以放自己的名称图片 -->
								<view>{{userInfo.nick_name}}</view>
								<!-- <open-data class="nickname" type="userNickName"></open-data> -->
							</view>
							<view class="center_vip">
								<view class="vip_text">
									<text>签名：{{userInfo.sign}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 统计 -->
		<view class="count">
			<view class="cell" @click="goto('/pages/userInfo/myFavourite/myFavourite?myfav='+'j13462901434')">
				{{like_num}}<text style="color: #AAAAAA;">我的喜欢</text>
			</view>
			<view class="cell" @click="goto('/pages/userInfo/myTaril/myTaril?myta='+'j13462901434')">{{trail_num}} <text
					style="color: #AAAAAA;">我的足迹</text> </view>
		</view>

		<!-- 其它 -->
		<view class="extra">
			<view></view>
			<view class="item icon-arrow" @click="goto('/pages/userInfo/userInfoDetail/userInfoDetail')">个人信息</view>
			<view class="item icon-arrow" @click="goto('/pages/userInfo/communication/communication')">联系官方</view>
			<button open-type="feedback" class="item icon-arrow">意见反馈</button>
		</view>
		<!-- 登录 -->
		<view class="extra" v-if="!isLogin">
			<button @click="isUserAllowLogin" class="logout item icon-arrow"
				style="text-align: center;background-color: #2b85e4;margin-top: 10rpx; color: white;">登录</button>
		</view>
		<!-- 退出 -->
		<view class="extra" v-if="isLogin">
			<button @click="loginOut" class="logout item icon-arrow"
				style="text-align: center;background-color: #d00000;margin-top: 10rpx;">退出</button>
		</view>
		<u-modal :show="show" @confirm="userLogin" @cancel="this.show = false" :title="title" showCancelButton="true"
			:content='content'></u-modal>
	</view>
</template>

<script>
	import api from '../../common/api/api';
	export default {
		data() {
			return {
				show: false,
				content: "将要获取你的微信账号信息是否同意？",
				title: "提示",
				like_num: 0,
				trail_num: 0,
				isLogin: false,
				hasInfo: false,
				toCommitMsg: false,
				userInfo: {
					avatar_url: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					nick_name: "微信用户",
					sign: "----"
				}
			}
		},
		// 获取展示数据
		onLoad: async function() {
			const that = this
			if (uni.getStorageSync("openid") ? true : false) {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						const {
							code
						} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						api("/user/wxlogin", {
							code
						}, "post").then((res) => {
							console.log(res)
							if (res.openid != uni.getStorageSync("openid")) {
								console.log("出错了")
								that.toCommitMsg = true
							} else {
								if (uni.getStorageSync("userInfo")) {
									that.hasInfo = true
								} else {
									that.hasInfo = false
								}
							}
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
			} else {
				that.toCommitMsg = true
			}
			if (this.isLogin) {
				this.like_num = (await api("/news/news_like_selectByUserId?user_id=" + uni.getStorageSync("openid")))
					.data
					.length
				this.trail_num = (await api("/recent_views/recent_views_selectByUserId?user_id=" + uni.getStorageSync(
						"openid"))).data
					.length
			}
		},
		methods: {
			async selectImageUrl() {
				let res = await this.$u.api.selectImageUrl({
					params: {
						user: this.userInfo.name
					}
				})
				this.image = res.data.data
			},
			gotoFeeds(url) {
				if (!this.isLogin) {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// 可以跳多级目录
				uni.navigateTo({
					url
				})
			},
			// 页面体跳转
			goto(url) {
				if (!this.isLogin) {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			isUserAllowLogin() {
				this.show = true
			},
			async userLogin() {
				this.like_num = (await api("/news/news_like_selectByUserId?user_id=" + uni.getStorageSync("openid")))
					.data
					.length
				this.trail_num = (await api("/recent_views/recent_views_selectByUserId?user_id=" + uni.getStorageSync(
						"openid"))).data
					.length
				const that = this
				this.show = false
				if (this.toCommitMsg) {
					uni.login({
						"provider": "weixin",
						"onlyAuthorize": true, // 微信登录仅请求授权认证
						success: function(event) {
							const {
								code
							} = event
							//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
							console.log(code)
							api("/user/wxlogin", {
								code
							}, "post").then((res) => {
								uni.setStorageSync("token", res.token)
								uni.setStorageSync("openid", res.openid)
								if (res.token && res.token) {
									that.isLogin = true
									that.toCommitMsg = false
									uni.navigateTo({
										url: "/pages/userInfo/userInfoDetail/userInfoDetail"
									})
								}
							})
						},
						fail: function(err) {
							// 登录授权失败  
							// err.code是错误码
						}
					})

				} else {
					if (this.hasInfo && uni.getStorageSync("userInfo")) {
						this.userInfo = uni.getStorageSync("userInfo")
						this.isLogin = true
						this.show = false
					} else {
						let userInfo = (await api("/user/selectByOpenid?openid=" + uni.getStorageSync("openid")))
						uni.setStorageSync("userInfo", userInfo)
						this.userInfo = userInfo
						this.isLogin = true
						this.show = false
					}
				}
			},
			loginOut() {
				uni.removeStorageSync("userInfo")
				uni.removeStorageSync("videoDataList")
				this.isLogin = false
				this.userInfo = {
					avatar_url: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
					nick_name: "微信用户",
					sign: "----"
				}
				this.like_num = 0
				this.trail_num = 0
			}

		},
		onShow: async function() {

			if (this.isLogin) {
				this.like_num = (await api("/news/news_like_selectByUserId?user_id=" + uni.getStorageSync("openid")))
					.data
					.length
				this.trail_num = (await api("/recent_views/recent_views_selectByUserId?user_id=" + uni.getStorageSync(
						"openid"))).data
					.length
				let userInfo = (await api("/user/selectByOpenid?openid=" + uni.getStorageSync("openid")))
				this.userInfo = userInfo
				uni.setStorageSync("userInfo", userInfo)
			}
		}
	};
</script>

<style scoped lang="scss">
	Page {
		font-size: 14px;
	}

	.top {
		width: 100%;
		height: 110px;
		background: #F4F4F4;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 100px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_img .user_head {
		width: 100%;
		height: 100%;
	}

	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	// .center_down {
	// 	display: flex;
	// 	flex-direction: row;
	// 	width: 80%;
	// 	height: 35px;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// }

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.vip_text {
		width: 300rpx;
		margin-top: 10rpx;
		margin-left: 30rpx;
		color: #AAAAAA;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 100%;
		background-color: #F4F4F4;
	}

	.profile {
		height: 375rpx;
		background-color: #ea4451;
		display: flex;
		justify-content: center;
		align-items: center;

		.meta {
			.avatar {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
			}

			.nickname {
				display: block;
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.count {
		display: flex;
		margin: 0 20rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #fff;

		position: relative;
		top: 10rpx;

		.cell {
			margin-top: 10rpx;
			flex: 1;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #333;
		}

		text {
			display: block;
			font-size: 24rpx;
		}
	}

	.orders {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 4rpx;

		.title {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #333;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			margin-top: -30rpx;
		}

		.sorts {
			padding-top: 30rpx;
			text-align: center;
			display: flex;
		}

		[class*="icon-"] {
			flex: 1;
			font-size: 24rpx;

			&::before {
				display: block;
				font-size: 48rpx;
				margin-bottom: 8rpx;
				color: #ea4451;
			}
		}
	}

	.address {
		line-height: 1;
		background-color: #fff;
		font-size: 30rpx;
		padding: 25rpx 0 25rpx 20rpx;
		margin: 10rpx 20rpx;
		color: #333;
		border-radius: 4rpx;
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
</style>